<template>
  <div>
    <div>
      <strong>菜单</strong>
      <ul>
        <li v-for="item in $rxRouterInfo.menus" :key="item.pagename" :class="{
          active:$rxRouterInfo.current.pagename===item.pagename
        }"><a :href="'#'+item.path">{{item.name}}</a></li>
      </ul>
    </div>
    <div><strong> 历史记录 </strong>
      <ul>
        <li v-for="(item,index) in $rxRouterInfo.pages" :key="index" :class="{
          active:$rxRouterInfo.current.pagename===item.pagename
        }">
        <a :href="'#'+item.path">{{item.name}}</a><button @click="remove(item)">点我删除，再次打开执行created</button>
        </li>
      </ul>
    </div>
    <component v-for="item in $rxRouterInfo.pages" :is="item.pagename" :key="item.pagename" v-show="$rxRouterInfo.current.pagename===item.pagename" :ref="item.pagename"/>
  </div>
</template>

<script>

export default {
  methods:{
    remove(item){
      this.$rxRouterInfo.removePage(item)
    }
  },
  created(){
  }
};
</script>

<style lang="scss">
.active{
  color: red;
  * {
    color: red;
  }
}
</style>
